<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 400px;height: 300px;border: solid 1px black;margin: 0 auto;}
        .box ul{margin: 0;padding: 0;list-style: none;display: flex;height: 40px;line-height: 40px;text-align: center;border-bottom: solid 1px black}
        .box li{flex: 1;border-left:solid 1px black;border-right: solid 1px black;cursor: pointer;}
        .box li:active{background: #99f}
        .box li.active{background: red}

        .cont div{height: 259px;display: none;}
        .cont .cont1{background: #66f;display: block}
        .cont .cont2{background: #6f6;}
        .cont .cont3{background: #f66;}
        .cont .cont4{background: #ff6;}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="active">热门推荐</li>
            <li>限时抢购</li>
            <li>积分兑换</li>
            <li>满减返现</li>
        </ul>
        <div class="cont">
            <div class="cont1">
                一堆各种复杂的页面结构1
            </div>
            <div class="cont2">
                一堆各种复杂的页面结构2
            </div>
            <div class="cont3">
                一堆各种复杂的页面结构3
            </div>
            <div class="cont4">
                一堆各种复杂的页面结构4
            </div>
        </div>
    </div>
</body>
<script>
    // OOA:分析：选项卡，点击按钮显示对应的内容
        // 1. 布局
        // 2. 选择元素，并设置默认索引
        // 3. 添加点击事件
            // 4. 获取上一个的索引
            // 5. 隐藏上一个内容
            // 5. 获取点击的按钮的索引
            // 6. 根据点击的按钮的索引，显示当前

    // OOD：设计：高内聚，低耦合
        // function Tab(){
        //     // 写属性，变量，选择元素，设置默认索引
        //     // ...
        //     // 选择元素之后，执行绑定事件
        //     this.addEvent();
        // }
        // // 写方法
        // Tab.prototype.addEvent = function(){
        //     // 添加事件
        //         // 触发了事件，执行隐藏上一个
        //         this.hide();
        //         // 执行获取点击的按钮的索引
        //         this.getIndex();
        // }
        // Tab.prototype.hide = function(){
        //     // 隐藏上一个内容
        // }
        // Tab.prototype.getIndex = function(){
        //     // 获取点击按钮的索引
        //     // 执行根据点击按钮的索引，显示当前内容
        //     this.show();
        // }
        // Tab.prototype.show = function(){
        //     // 根据点击按钮的索引，显示当前内容
        // }
        // new Tab();

    // OOP
        function Tab(){
            // 写属性，变量
            // 选择元素
            this.li = document.querySelectorAll(".box li");
            this.div = document.querySelectorAll(".cont>div");
            // 设置默认索引
            this.index = 0;
            // 选择元素之后，执行绑定事件
            this.addEvent();
        }
        // 写方法
        Tab.prototype.addEvent = function(){
            const that = this;
            for(let i=0;i<this.li.length;i++){
                this.li[i].xuhao = i;
                // 添加事件
                this.li[i].onclick = function(){
                    // 触发了事件，执行隐藏上一个
                    that.hide();
                    // console.log(this)
                    // 执行获取点击的按钮的索引
                    that.getIndex(this);
                }
            }
        }
        Tab.prototype.hide = function(){
            // 隐藏上一个内容
            this.li[this.index].className = "";
            this.div[this.index].style.display = "none";
        }
        Tab.prototype.getIndex = function(now){
            // 获取点击按钮的索引
            // console.log(now.xuhao);
            // 将当前按钮的索引设置给之前的默认索引（今天是明天的昨天）
            this.index = now.xuhao;
            // 执行根据点击按钮的索引，显示当前内容
            this.show();
        }
        Tab.prototype.show = function(){
            // 根据点击按钮的索引，显示当前内容
            this.li[this.index].className = "active";
            this.div[this.index].style.display = "block";
        }
        var t = new Tab();

</script>
</html>